import React, { useState, useEffect, useCallback } from 'react';
import { Space, Button, Divider, Card, Typography } from 'antd';

const MONSTERS = [
  <Card
    key='1'
    style={{
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
    }}
    cover={
      <img
        style={{ padding: 12, width: 72, height: 72 }}
        src=''
      />
    }
  >
    <Card.Meta
      title={
        <Typography.Title code level={3}>
          1
        </Typography.Title>
      }
    />
  </Card>,
  <Card
    key='2'
    style={{
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
    }}
    cover={
      <img
        style={{ padding: 12, width: 72, height: 72 }}
        src=''
      />
    }
  >
    <Card.Meta
      title={
        <Typography.Title code level={3}>
          2
        </Typography.Title>
      }
    />
  </Card>,
  <Card
    key='3'
    style={{
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
    }}
    cover={
      <img
        style={{ padding: 12, width: 72, height: 72 }}
        src=''
      />
    }
  >
    <Card.Meta
      title={
        <Typography.Title code level={3}>
          3
        </Typography.Title>
      }
    />
  </Card>,
  <Card
    key='4'
    style={{
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
    }}
    cover={
      <img
        style={{ padding: 12, width: 72, height: 72 }}
        src=''
      />
    }
  >
    <Card.Meta
      title={
        <Typography.Title code level={3}>
          4
        </Typography.Title>
      }
    />
  </Card>,
];

export const useF36 = ({ currentFloor }: { currentFloor: number }) => {
  const [sequence, setSequence] = useState<typeof MONSTERS>([]);

  const push = useCallback((index: string | number) => {
    const idx = typeof index === 'number' ? index : Number.parseInt(index);
    setSequence((pre) => {
      return [...pre, MONSTERS[idx - 1]];
    });
  }, []);

  const pop = useCallback(() => {
    setSequence((pre) => {
      return pre.slice(0, -1);
    });
  }, []);

  useEffect(() => {
    if (currentFloor !== 36) {
      return;
    }

    const onKeyDown = (e: KeyboardEvent) => {
      if (['1', '2', '3', '4'].includes(e.key)) {
        push(e.key);
      } else if (['Delete', 'Backspace'].includes(e.key)) {
        pop();
      } else if (['Escape'].includes(e.key)) {
        setSequence([]);
      }
    };

    document.addEventListener('keydown', onKeyDown);

    return () => {
      document.removeEventListener('keydown', onKeyDown);
    };
  }, [currentFloor, push, pop]);

  if (currentFloor !== 36) {
    return null;
  }

  return {
    content: (
      <Space direction='vertical' style={{ display: 'flex' }}>
        <Typography.Paragraph>
          可以使用键盘
          <Typography.Text code>1</Typography.Text>,
          <Typography.Text code>2</Typography.Text>,
          <Typography.Text code>3</Typography.Text>,
          <Typography.Text code>4</Typography.Text> 追加怪物到序列中。
          <Typography.Text code>Delete</Typography.Text>或
          <Typography.Text code>Backspace</Typography.Text>删除最后一个怪物。
          <Typography.Text code>Escape</Typography.Text> 清空序列。
        </Typography.Paragraph>
        <Space>
          {MONSTERS.map((monster, index) => {
            return (
              <div
                key={index}
                style={{ cursor: 'pointer' }}
                onClick={() => {
                  setSequence((pre) => {
                    return [...pre, monster];
                  });
                }}
              >
                {monster}
              </div>
            );
          })}
        </Space>
        <Button
          type='primary'
          danger
          onClick={() => {
            setSequence([]);
          }}
        >
          Clear
        </Button>
        <Space>
          {sequence.map((monster, index) => (
            <React.Fragment key={index}>
              <div>{monster}</div>
              {(index + 1) % 4 === 0 && (
                <div className='spacer' style={{ width: 48 }} />
              )}
            </React.Fragment>
          ))}
        </Space>
        <Divider />
      </Space>
    ),
  };
};
